<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Fish Canvas Test</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	
	<script type="text/javascript" charset="utf-8" src="fish.js"></script>
	
	<style type="text/css" media="screen">

	 html, body{
	   margin: 0;
	   padding: 0;
	   height: 100%;
	   width: 100%;
	   overflow: hidden;
	   font-family: Arial, "MS Trebuchet", sans-serif;
	   background: black;
	 }
	 #stop{
	   position: absolute;
	   top: 30px;
	   right: 100px;
	 }
	 #start{
	   position: absolute;
	   top: 30px;
	   right: 170px;
	 }
	 
	 #refresh{
 	   position: absolute;
 	   top: 30px;
 	   right: 30px;
 	 }
	 #canvas{
	   display: block;
	   border: 1px solid #333;
	   background: #111;
	   margin: 50px auto 0 auto;
	 }
	 
	 #coord,
	 #instruct{
	   position: absolute;
	   bottom: 40px;
	   width: 100%;
	   text-align: center;
	   font-size: 20px;
	   color: white;
	 }
	 
	 #instruct{
	   bottom: 20px;
	 }
	</style>
</head>

<body>
  <button onclick="stopRandom();" id="stop">Stop</button>
  <!-- ><button onclick="startRandom();" id="start">Start</button> -->
  
  <div id="instruct">Once you have fishes, click a hold to create an avoid area</div>
  <div id="coord">Click on square to make fishes</div>
  
  <canvas id="canvas"></canvas>

  <script type="text/javascript">

      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d");
      canvas.addEventListener("mousedown", mouseDown, false);
      canvas.addEventListener("mouseup", mouseUp, false);
      
      
      var X_MAX = 16;
      var Y_MAX = 16;
      var MAX_FISH = 16;
      var skittishness = 4;
      var speed = 100; //ms per move

      $(function() {
        $(window).resize(function() {
          $(canvas).attr("height", $(window).height()-210);          
          $(canvas).attr("width", $(window).height()-210);
        });
        $(window).resize();
      });
      
      

      function pad(number, length){
          var str = '' + number;
          while (str.length < length) {
              str = '0' + str;
          }
          return str;
      }
      
      
      
      function plot(x, y, val){
        var uW = (canvas.width)/(X_MAX+1);
        var uH = (canvas.height)/(Y_MAX+1);
        ctx.fillStyle = "rgba(255, 20, 147, 1)";
        ctx.fillRect(x*uW,y*uH,uW,uH);
      }
      
      function avoidPlot(x, y, val){
        var x = x;
        var y = y;
        ctx.fillStyle = "rgba(17, 17, 17, 1)";
        ctx.beginPath();
        ctx.arc(x, y, 80, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        
        
        var radgrad = ctx.createRadialGradient(x, y, 0, x, y, 50);
        radgrad.addColorStop(0,   'rgba(255, 255, 255, 0.3)');
        radgrad.addColorStop(0.5, 'rgba(225, 255, 255, 0.1)');
        radgrad.addColorStop(1,   'rgba(225, 225, 225, 0)');

        // draw shape
        ctx.fillStyle = radgrad;
        
        ctx.beginPath();
        ctx.arc(x, y, 50, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        console.debug("avoid plot", x +" "+ y);
      }
      
      
      function clearCanvas(){
        ctx.fillStyle = "rgba(17, 17, 17, 0.5)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
      
      
      function startRandom(){
        //newFish = setInterval(mouseUp, 1);
        refresh();
        fish = setInterval(mouseUp, 40);
      }
      
      function stopRandom(){
        //clearCanvas();
        clearInterval(movetheFish);
        clearInterval(newFish);
        
        //shoal = new Array();
      }
      
      
      function refresh(){
        if((typeof(movetheFish) == "undefined")){
          movetheFish = setInterval(draw, speed);
        } //else{
          //  clearTimeout(movetheFish);
          //  movetheFish = undefined;
          //}
        
      }
      
      
      


  </script>

</body>
</html>